import 'package:cached_network_image/cached_network_image.dart';
import 'package:casdon/app/config/theme/theme_extention.dart';
import 'package:casdon/modules/recipe/data/model/recipe_module_content_model.dart';
import 'package:casdon/modules/recipe/data/model/recipe_placeholder_data.dart';
import 'package:casdon/modules/recipe/ui/widgets/play_orverlay_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 单个纯图片卡片
class RecipeCardStyle2 extends StatelessWidget {
  final RecipeModuleContentModel item;
  final double imageHeight;

  const RecipeCardStyle2({required this.item, required this.imageHeight});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: 12.w),
      width: MediaQuery.of(context).size.width / 2.3,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Stack(
          children: [
            /// 背景图片
            CachedNetworkImage(
              imageUrl: item.imgUrl,
              cacheKey: item.id,
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
              fadeInDuration: Duration.zero,
              placeholder: (context, url) => const SizedBox(),
              errorWidget: (context, url, error) {
                return Image.network(
                  recipePlaceHolderImgUrl,
                  fit: BoxFit.cover,
                  width: double.infinity,
                  height: double.infinity,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      color: Colors.grey[200],
                      child: const Icon(
                        Icons.image_outlined,
                        color: Colors.grey,
                      ),
                    );
                  },
                );
              },
            ),

            /// 整体半透明蒙层（覆盖整个图片）
            Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment(0.0, -0.3),
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.black.withAlpha(0), // 顶部轻微遮罩
                    Colors.black.withAlpha(255), // 底部更深
                  ],
                ),
              ),
            ),

            if (item.isVideo) const PlayOverlayButton(),

            /// 底部文字区域
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      item.title,
                      maxLines: 2,
                      style: context.textTheme.labelLarge!.copyWith(
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    SizedBox(height: 2.h),
                    Text(
                      '共${item.count}道菜',
                      style: context.textTheme.bodySmall!.copyWith(
                        color: Colors.white.withAlpha(152),
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
